<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veu数据代理和事件处理</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<style>
#show{
    height: 200px;
    margin-top: 20px;
    width: 600px;
    background-color: yellowgreen;
}
#show1{
    margin-top: 20px;
    background-color: aquamarine;
    height: 150px;
    width: 400px;
}
#box2{
    margin-top: 20px;
    background-color: aquamarine;
    height: 150px;
    width: 400px;
}
#box1{
    height: 200px;
    margin-top: 20px;
    width: 600px;
    background-color: yellowgreen;
}
</style>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo">点我提示信息</button>
        <!-- v-on:click 相当于 @click -->
        <button @click="showInfo1">点我提示信息--1(不传参)</button>
        <button @click="showInfo2(66,$event)">点我提示信息--2(传参)</button>
        <!--上面这一行就是关于Vue到处event占位符 -->
        <!-- 阻止默认事件 -->
        <a href="https://www.msn.cn/zh-cn?OCID=fwdbahp" @click.prevent="showInfo3">一个网站的首页</a>
        <!-- 阻止事件冒泡 -->
        <div @click="show" id="show"><button @click.stop="show_inner" id="show1"></button></div>
        <!-- 事件只是触发一次 -->
        <button @click.once="show2">点我出发</button>
        <!-- 使用事件的捕获 -->
                <div id="box1" @click.capture="showMsg(1)">box1
                    <div id="box2" @click="showMsg(2)">box2</div>
                </div>
        <!-- @click.prevent Vue中阻止事件弹窗 -->
        <!-- Vue 中的事件修饰符：
            prevent:阻止默认事件（常用）
            stop: 阻止事件冒泡（常用） 
            once:事件只触发一次(常用)
            capture:使用事件的捕获模式,正常的话是在冒泡（由内往外）阶段进行事件处理的，这里可以改为由外往内（捕获）
            self:只有event.target是当前操作的元素才是触发事件
            passive:事件的默认行为立即执行，无须等待事件回调执行完毕；
         -->
    </div>
    <script>
   Vue.config.productionTip=false;
       
        const vm=new Vue({
            el:'#root',
            data:{
                name:'luoyu'
            },
            methods:{
             //这个是是最简单的一个Vue内置函数      
            showInfo(){
                alert("同学你好");
                console.log(this);
            },
            showInfo1(event){
                console.log(event.target.innerText);//指的是内置字样
                console.log(this===vm);//Vue实例
            },
            showInfo2(num,e){//这里直接引用
                console.log(num,e);
            },
            showInfo3(e){
                // e.preventDefault();//js中阻止事件弹窗
                    alert("你真垃圾");
            },
            show(){
                alert("你好low!");
            },
            show_inner(e){
                // e.stopPropagation();//js 中阻止事件冒泡
                alert("information");
            },
            show2(){
                alert("my name is luoyu");
            },
            showMsg(msg){
                console.log(msg);
            }
            }
        })
    </script>
</body>
</html> 